<template>

  <!-- <el-button type="primary" text>
  增加
</el-button> -->
<div class="navtexts"> 
  <div class="bianjicjss">编辑商品</div>
  <div class="quanbuhei">全部好物<span>></span></div>
  <div class="jihuinavs cur" v-for="(item,index) in navtext" :key="index" :class="nastext == index ? 'redtext' : ''" @click="addnavtext(index)">{{item}}</div>
</div>
<div class="butshangping">
  <div class="addbutred cur"  @click="add">+ 添加商品分类</div>
  <div class="addbut cur"  @click="add">+ 添加商品</div>
</div>
<!-- Form增加 -->
<el-dialog v-model="dialogFormVisible" title="抽奖项目">
  <el-form :model="form">
    <el-form-item label="主题" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off" />
    </el-form-item>
    <el-form-item label="活动类型" :label-width="formLabelWidth">
      <el-select v-model="form.types" placeholder="请选择活动类型" size="large" >
        <el-option v-for="item in optionshd" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="奖品名称" :label-width="formLabelWidth" v-if="form.types == 0">
      <el-input v-model="form.title" autocomplete="off" />
    </el-form-item>
    <el-form-item label="奖品数量" :label-width="formLabelWidth" v-if="form.types == 0">
      <el-input v-model="form.num" autocomplete="off" />
    </el-form-item>
    <el-form-item label="抽奖状态" :label-width="formLabelWidth">
      <el-select v-model="form.cjzt" placeholder="请选择抽奖状态" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="轮数" :label-width="formLabelWidth" v-if="form.types == 2">
      <el-input v-model="form.lunsu" autocomplete="off" />
    </el-form-item>
    <el-form-item label="参与时间" :label-width="formLabelWidth" v-if="form.types == 2">
      <el-date-picker :disabledDate="disabledDateFun" v-model="form.cytime" type="datetime" placeholder="选择日期" />
      
    </el-form-item>
    <el-form-item label="开奖时间" :label-width="formLabelWidth">
      <el-date-picker :disabledDate="disabledDateFun" v-model="form.kjtime" type="datetime" placeholder="选择日期" />
    </el-form-item>
    <el-form-item label="奖品详情图" :label-width="formLabelWidth" v-if="form.types == 2">
      <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfiles`" :data="jm()"
        :show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'jpimg' }) }">
        <img v-if="form.jpimg" :src="HttpnewImg+form.jpimg" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    
    
    <el-form-item label="缩略图" :label-width="formLabelWidth">
      <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfiles`" :data="jm()"
        :show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'img' }) }">
        <img v-if="form.img" :src="HttpnewImg+form.img" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="详情图片" :label-width="formLabelWidth">
      <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfile`" :data="jm()"
        :show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'images' }) }">
        <img v-if="form.images" :src="HttpnewImg+form.images" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="推文链接" :label-width="formLabelWidth">
      <el-input v-model="form.twlink" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="postData">
        确定
      </el-button>
    </span>
  </template>
</el-dialog>


<el-table :data="tableData" style="width: 100%;margin-top:37px" header-cell-style="background-color: #D3D3D3;color:#000000" >

  <el-table-column class-name=".detailShow" prop="img" label="主图预览" width="250" align="center">
    <template #default="scope">
      <img style="width: 100px; height: 100px" :src="HttpnewImg + scope.row.img">
    </template>
  </el-table-column>

  <el-table-column fixed prop="name" label="商品名称" width="250" align="left" />
  <el-table-column fixed prop="name" label="产品系列" width="250" align="left" />
  <el-table-column  prop="total" label="库存数量" width="200" align="center" />
  <el-table-column prop="cytime" label="兑换积分/商品价值" width="250" align="center">
    <template #default="scope">
      {{ getLocalTime(scope.row.cytime)}}
    </template>
  </el-table-column>

  <el-table-column
      type="index"
      label="排序"
      width="100"
      align="center">
    </el-table-column>

  <el-table-column class-name=".detailShow" prop="img" label="商品详情" width="250" align="center">
    <template #default="scope">
      <img style="width: 100px; height: 100px" :src="HttpnewImg + scope.row.img">
    </template>
  </el-table-column>

  <el-table-column fixed="right" label="编辑商品" align="center" width="200">
    <template #default="scope">
        <div class="addbuts"  @click="eid(scope.row.id)">+ 编辑详情</div>
        <div class="addbutss"  @click="del(scope.row.id)">+ 删除商品</div>
    </template>
  </el-table-column>
</el-table>
<el-dialog v-model="dialogjx" title="添加奖项">
  <el-table :data="jxlist" style="width: 100%">
    <el-table-column fixed prop="paim" label="奖项" width="120" align="center" />
    <el-table-column fixed prop="contents" label="奖品名称" width="220" align="center" />
    <el-table-column fixed prop="zjrs" label="奖品数量" width="120" align="center" />
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button link type="danger" @click="deljx(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-form :model="jxform">
    <el-form-item label="奖项" :label-width="formLabelWidth">
      <el-input v-model="jxform.paim" autocomplete="off" />
    </el-form-item>
    <el-form-item label="奖品名称" :label-width="formLabelWidth">
      <el-input v-model="jxform.contents" autocomplete="off" />
    </el-form-item>
    <el-form-item label="奖品数量" :label-width="formLabelWidth">
      <el-input v-model="jxform.zjrs" autocomplete="off" />
    </el-form-item>
  </el-form>
  <div style="text-align: center;">
    <el-button type="primary" text @click="addjx">
      添加奖项
    </el-button>
  </div>
</el-dialog>

</template>
<script>
import UploadFile from 'element-plus'
import {
ElMessageBox,
ElMessage
} from 'element-plus'
export default {
components: {
  [UploadFile.name]: UploadFile
},
data() {
  return {
    HttpImg: "http://gyycadmincss.hansn.cn",
    HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
    tableData: [],
    jxlist: [],
    jxform: [],
    form: [],
    form1: [],
    nastext:0,
    navtext:['骑行装备','节日限定','优惠服务'],
    dialogFormVisible: false,
    dialogFormVisible1: false,
    dialogjx: false,
    formLabelWidth: '120px',
    imageUrl: "",
    options: [{
      value: '0',
      label: '未发布'
    }, {
      value: '1',
      label: '活动中'
    }],
    optionshd: [{
      value: '0',
      label: '普通抽奖'
    },
    {
      value: '1',
      label: '大型抽奖'
    },
    {
      value: '2',
      label: '519抽奖'
    }
    ],
    optionscysj:[
      {
      value: '0',
      label: '10:00'
    },
    {
      value: '1',
      label: '14:00'
    },
    ],
    value: '',
    id: '',
    hdid: "",
    hdname: ""
  }
},
mounted() {
  this.getData()
},
methods: {
  addnavtext(index){
   this.nastext = index
  },
  tj(id,name) {
    this.dialogjx = true;
    this.hdid = id;
    this.hdname=name;
    this.getjxlist()
  },
  add() {
    this.form.name = "";
    this.form.kjtime = "";
    this.form.cjzt = "";
    this.form.images = "";
    this.form.img = "";
    this.form.title = "";
    this.form.num = "";
    this.dialogFormVisible = true;
    this.id = ""
    this.form.twlink=""
    this.form.types = undefined
    this.form.lunsu="";
    this.form.cytime=""
  },
  addjx() {
    let data = {
      id: this.hdid,
      name: this.hdname,
      contents: this.jxform.contents,
      paim: this.jxform.paim,
      zjrs: this.jxform.zjrs,
    }
    this.$http.post("/index.php/index/admincj/bigcjjpdj", data).then(res => {
      if (res.code == 200) {
        this.getjxlist()
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        this.jxform=[]
      }
    })
  },
  deljx(id) {
    ElMessageBox.confirm(
      '是否确定删除?',
      '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
      .then(() => {
        this.$http.post("/index.php/index/admincj/bigcjjpdjdel", {
          id: id
        }).then(res => {
          if (res.code == 200) {
            this.getjxlist()
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
          }
        })
      })
      .catch(() => {

      })
  },
  getjxlist() {
    this.$http.post("/index.php/index/admincj/bigcjjpdjlist", {
      id: this.hdid
    }).then(res => {
      if (res.code == 200) {
        this.jxlist = res.data;
      }
    })
  },
  del(id) {
    ElMessageBox.confirm(
      '是否确定删除?',
      '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
      .then(() => {
        this.$http.post("/index.php/index/goodses/cjdel", {
          id: id
        }).then(res => {
          if (res.code == 200) {
            this.getData()
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
          }
        })
      })
      .catch(() => {

      })
  },
  eid(id) {
    this.dialogFormVisible = true;
    this.id = id;
    this.$http.post("index.php/index/goodses/cjshow", {
      id: id
    }).then(res => {
      if (res.code == 200) {
        this.form = res.data[0]
        this.form.kjtime = this.getLocalTime(res.data[0].kjtime)
        this.form.cytime = this.getLocalTime(res.data[0].cytime)
        if (res.data[0].cjzt == '0') {
          this.value = "未发布"
        } else if (res.data[0].cjzt == '1') {
          this.value = "活动中"
        } else {
          this.value = "已结束"
        }

        console.log("kjtime", this.form.kjtime)
        console.log("cjzt", this.value)
      }
    })
  },
  // updateData() {
  // 	let data1 = {
  // 		id: this.form1.id,
  // 		name: this.form1.name,
  // 		cjzt: this.form1.cjzt,
  // 		kjtime:this.getTimeFormat(this.form1.kjtime),
  // 		images: this.form1.images,
  // 		twlink: this.form1.twlink,
  // 	}
  // 	console.log(data1)
  // 	this.$http.post("/index.php/index/goodses/cjupdate", data1).then(res => {
  // 		if (res.code == 200) {
  // 			this.dialogFormVisible1 = false;
  // 			this.getData()
  // 		 }
  // 	 })
  // },
  getData() {
    this.tableData = []
    this.$http.post("/index.php/index/goodses/setcjshow").then(res => {
      console.log(res)
      this.tableData = res.data;
    })
  },
  postData() {
    // this.form.cjzt = this.value;
    let data = {
      name: this.form.name,
      cjzt: this.form.cjzt,
      kjtime: this.getTimeFormat(this.form.kjtime),
      images: this.form.images,
      img: this.form.img,
      title: this.form.title,
      num: this.form.num,
      twlink: this.form.twlink,
      id: this.id,
      types: this.form.types,
      cytime: this.getTimeFormat(this.form.cytime),
      jpimg: this.form.jpimg,
      lunsu: this.form.lunsu
    }
    this.$http.post(this.id ? "/index.php/index/goodses/cjupdate" : "/index.php/index/goodses/cjadd", data).then(res => {
      if (res.code == 200) {
        this.dialogFormVisible = false;
        this.id = ""
        ElMessage({
          message: this.id ? '编辑成功' : '新增成功',
          type: 'success',
        })
        this.getData()
      }
    })
  },
  getTimeFormat(zcTime) {
    let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
    return time;
  },
  disabledDateFun(time) {
    return time.getTime() < Date.now() - 8.64e7;
  },
  formatEmployment(type) {
    // 根据源数据经过处理 把处理之后的数据返回
    // 定义一个映射结构
    const map = {
      0: '未发布',
      1: '活动中',
      2: '已结束',
    }
    return map[type]
  },
  getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
  }
}
}
</script>
<style scoped>
.el-table__body {
  border-collapse: separate;
  border-spacing: 0 6px;
}
.el-table__row{
background-color: #F3F3F3 !important;
margin-bottom: 6px !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}

.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}

.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.navtexts{
display: flex;
align-items: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.bianjicjss{
font-size: 24px;
font-weight: 400;
color: #000;
margin-right: 32px;
}
.redtext{
color: #FF0000;
font-weight: 700 !important;
}
.quanbuhei{
font-size: 18px;
font-weight: 700;
color: #000;
}
.quanbuhei span{
margin: 0 42px 0 16px;
color: #FF0000;
}
.jihuinavs{
margin-right: 29px;
font-size: 18px;
font-weight: 400;
}
.addbut{
position: absolute;
right: 60px;
top: 0px;
width: 114px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #FF0000;
color: #fff;
border-radius: 20px;
font-size: 14px;
}
.addbutred{
position: absolute;
right:192px;
top: 0px;
width: 114px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #868686;
color: #fff;
border-radius: 20px;
font-size: 14px;
}


.addbutx{
width: 114px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #FF0000;
color: #fff;
border-radius: 20px;
margin-left: 30px;
}
.addbuts{
margin-top:6px;
width: 114px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #fff;
color: #000;
border-radius: 20px;
margin-left: 30px;
font-weight: 700;
}
.addbutss{
margin-top:6px;
width: 114px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #FF0000;
color: #fff;
border-radius: 20px;
margin-left: 30px;
font-weight: 700;
}
</style>
